<div class="page_head">
    <div class="black_Last" onClick="javascript :history.back(-1);">
    </div>
    <div class="head_title">客户意见</div>
</div>
<form action="">
    <div class="container">
        <div class="other_message">
            <div class="otherOpinion">
                其他方面意见及建议
            </div>
            <div class="otherBox">
                <textarea name="otherContent" cols="30" rows="20">其他方面意见和建议</textarea>
            </div>
            <div class="doubleBtn">
                <div class="btnPrv">上一步</div>
                <div class="sub">提交</div>
            </div>
        </div>
        <div class="subSuccess">
            <div class="successPrompt"> 提交成功！谢谢你的意见建议</div>
            <div class="time_show">2016-03-18</div>
            <a href="/">返回首页</a>
        </div>
    </div>
</form>
<script>
    /********以下内容是操作页面动效果javascript**********/
//加载意见表
    $(function () {
        $.ajax({
            url: '/rest/findOpinion.jspa',// 跳转到 action
            data: "cusId=1",
            dataType: "json",
            success: function (data) {
                var ar = $.parseJSON(data.result);
                Loading(ar.arr);
                opration()
            },
            error: function () {
                // view("异常！");
                alert("异常！");
            }
        });
        // Loading(arr)
        function opration() {
            /****  点击属性为subBtn的按钮，如果当前页为第一部分，那么点击时，
             本部分隐藏，显示下一部分，且下一部分中subBtn隐藏，双按钮显示
             ***/
            $(".subBtn").click(function () {
                $(".add_message").hide();
                $(this).parent().parent().next().show();
                $(".doubleBtn").show();
                $(document).scrollTop(0);
            });
            //点击属性为btnNext的按钮，如果有下一页更换意见记录内容，如果没有就显示其他意见；本身页面隐藏
            $(".btnNext").click(function () {
                $(".add_message").hide();
                $(this).parent().parent().parent().next().show();
                var _index = $(this).parent().parent().parent().index() + 1;
                if (_index == $(".add_message").length) {
                    $(".add_message").hide();
                    $(".other_message").show();
                }
                $(document).scrollTop(0);
            });
            //点击上一步按钮，页面展现上一页面，如果是第一页那么 双按钮隐藏，单按钮显示
            $(".btnPrv").click(function () {
                $(".add_message").hide();
                $(this).parent().parent().parent().prev().show();
                var _index = $(this).parent().parent().parent().index();
                if (_index == 1) {
                    $(".doubleBtn").hide();
                }
                console.log($(this).parent().parent().attr("class") == "other_message")
                if ($(this).parent().parent().attr("class") == "other_message") {
                    $(this).parent().parent().hide();
                    $(".container").children(".add_message").last().show();
                }
                $(document).scrollTop(0);
            })
            //点击提交按钮sub按钮本页面隐藏，显示提交成功按钮
            $(".sub").click(function () {
                var arr = dataCollection();
                console.log(arr);

                $.ajax({
                    type: "post",
                    url: '/rest/saveRecord.jspa',// 跳转到 action
                    data: {arr: JSON.stringify(arr)},
                    dataType: "json",
                    success: function (data) {
                        $(".other_message").hide();
                        $(".subSuccess").show();
                    },
                    error: function () {
                        // view("异常！");
                        alert("异常！");
                    }
                });
            })
        }
    });

    //加载初始页面数据
    function Loading(arr) {
        var html = "";
        var y = 0;
        for (var i = 0; i < arr.length; i++) {
            var pn = arr[i].pagename;
            var num = (i + 1) + "/" + arr.length;
            html += '<div class="add_message" id="' + arr[i].id + '"><div class="headTop"><span>' + pn + '</span><span>' + num + '</span></div><div class="addOpinion">'
            for (var j = 0; j < arr[i].select.length; j++) {
                var T_name = arr[i].select[j].selectname;
                html += '<div class="opinion1" id="' + arr[i].select[j].id + '"> <div class="title1">' + T_name + '</div> <ul>'
                for (var h = 0; h < arr[i].select[j].taidu.length; h++) {
                    var name = arr[i].select[j].taidu[h].name;
                    html += '<li><input type="radio" name="idea' + y + '" value="' + name + '">' + name + '</li>'
                }
                y++;
                html += "</ul>"
                html += "<textarea name='textConten' cols='30' rows='5'>意见及反馈</textarea>"
                html += "</div>"
            }
            html += "<div class='subBtn'>下一步</div>"
            html += "<div class='doubleBtn'><button type='button' class='btnPrv'>上一步</button><button type='button'class='btnNext'>下一步</button></div>"
            html += "</div>"
            html += "</div>"
        }
        $(".container").prepend(html);
        $(".container").children(".add_message").hide();
        $(".container").children(".add_message").eq(0).show();
        $(".doubleBtn").hide();
        $(".subBtn").hide();
        $(".subBtn").eq(0).show();
    }
    /*********以上是加载测试函数******/

//收集提交数据的方法
    function dataCollection() {
        var list = {}, arrs = [];
        var other_text = $(".other_message").find("textarea").val();
        list.other_text = other_text;
        for (var i = 0; i < $(".add_message").length; i++) {
            var ID1_list = $(".add_message")[i].id;
            var F = $(".add_message")[i];
            for (var j = 0; j < $(F).find(".opinion1").length; j++) {
                var ID2_list = $(F).find(".opinion1")[j].id;
                var arr = {};
                arr.ID = ID1_list;
                arr.id2 = ID2_list;
                var L = $(F).find(".opinion1")[j]
                var val = $(L).find("input:checked").val();
                var textVal = $(L).find("textarea").val();
                arr.selected = val;
                arr.text = textVal
                arrs.push(arr);
            }
            list.arrs = arrs;
        }
        //console.log(list)
        return list;
    }
</script>
